<template>
  <page-header-wrapper >
    <a-card :bordered="false" size="small">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item  label="模块编号">
                <a-input size="small" v-model="queryParam.id" placeholder="" @change="() => $refs.table.refresh(true)" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="模块名称">
                <a-input size="small" v-model="queryParam.name" placeholder="" allowClear />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="服务名">
                <a-input size="small" v-model="queryParam.serivceName" placeholder="" allowClear />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="是否发布">
                <a-radio-group size="small" v-model="queryParam.publishService" @change="() => $refs.table.refresh(true)">
                  <a-radio-button value="">全部</a-radio-button>
                  <a-radio-button value="1">上线</a-radio-button>
                  <a-radio-button value="0">下线</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="48">
            <a-col :md="24" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" size="small" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button
                  style="margin-left: 8px"
                  size="small"
                  @click="() => ((this.queryParam = {publishService: ''}), $refs.table.refresh(true))"
                >
                  重置
                </a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="table-operator">
        <a-button type="primary" size="small" icon="plus" @click="handleCreate(null)">新建</a-button>
      </div>
      <s-table ref="table" size="small" rowKey="id" :columns="columns" :data="loadData" showPagination="auto">
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="name" slot-scope="text, record">
          <a @click="handleCreate(record)">{{ text }}</a>
        </span>
        <span slot="publishServiceSlot" slot-scope="text, record">
          <template>
            <a-switch
              :checked="record.publishService == 1"
              checked-children="上线"
              un-checked-children="下线"
              @change="handleChgModulePublishService(record)"
            />
          </template>
        </span>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="goUrlList(record)">Api列表</a>
            <a-divider type="vertical" />
            <a @click="handleDelete(record)">删除</a>
          </template>
        </span>
      </s-table>

      <create-module
        :visible="createModuleVisible"
        :form="mdl"
        @handle-ok="handleCreateOk"
        @handle-cancel="handleCreateCancel"
      />
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { failmsg } from '@/api/api'
import { deleteById, getList, update } from '@/api/mock-module'
import { STable } from '@/components'
import CreateModule from './modules/CreateModule'

export default {
  name: 'ModuleList',
  components: {
    STable,
    CreateModule,
  },
  data() {
    this.columns = [
      {
        title: '#',
        width: '60px',
        scopedSlots: { customRender: 'serial' },
      },
      {
        title: '编号',
        dataIndex: 'id',
      },
      {
        title: '模块名称',
        dataIndex: 'name',
        scopedSlots: { customRender: 'name' },
      },
      {
        title: '服务名',
        dataIndex: 'serviceName',
      },
      {
        title: '是否发布服务',
        dataIndex: 'publishService',
        scopedSlots: { customRender: 'publishServiceSlot' },
      },
      {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
      },
    ]
    return {
      createModuleVisible: false,
      mdl: {},
      // 查询参数
      queryParam: { publishService: '' },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return getList(requestParameters)
          .then((res) => {
            return res
          })
          .catch((error) => {
            failmsg(error)
          })
      },
    }
  },
  computed: {},
  methods: {
    handleDelete(record) {
      deleteById(record)
        .then((res) => {
          this.$refs.table.refresh(true)
        })
        .catch((err) => {
          failmsg(err)
        })
    },
    handleChgModulePublishService(record) {
      const requestParameters = {
        id: record.id,
        // 上线和下线互转
        publishService: ~record.publishService & 1,
      }
      update(requestParameters)
        .then((res) => {
          this.$refs.table.refresh(true)
        })
        .catch((err) => {
          failmsg(err)
        })
    },
    handleCreate(record) {
      this.createModuleVisible = true
      if (record) {
        this.mdl = { ...record, isEdit: true, publishService: String(record.publishService) }
      } else {
        this.mdl = { isEdit: false }
      }
    },
    handleCreateOk() {
      this.createModuleVisible = false
      this.$refs.table.refresh(true)
    },
    handleCreateCancel() {
      this.mdl = {}
      this.createModuleVisible = false
    },
    goUrlList(record) {
      this.$router.push({ path: '/mock/url-list?moduleId=' + record.id })
    },
  },
}
</script>
